/* eslint-disable */
<template>

    <div>
      <div class="input-container">
        书签类型管理：
        <el-input class="add-input" v-model="bookmarkTypeName" ></el-input>
        <el-button class="add-btn" @click="addBookmarkType">添加</el-button>
      </div>
      <el-row :gutter="12">
        <el-col :span="3" v-for="(item) in items" :key="item.id">
          <el-card class="type-card" shadow="hover">
            {{ item.name }}
            <el-button  type="text"  @click="deleteBookmarkType(item.id)">删除</el-button>
            <el-button type="text" >修改</el-button>
          </el-card>
        </el-col>
      </el-row>

   
  
     
     
    </div>
</template>

<script>
import {saveBookMarkType,deleteBookMarkType,getBookMarkType} from '@/api/bookmark';

export default {
  name: 'bookmarkType',
  data () {
    return {
      bookmarkTypeName: '',
      items:[],
    }
  },
  methods: {
    addBookmarkType(){
      var _this = this;
      if(_this.bookmarkTypeName==""){
          alert("输入的书签类型不能为空");
      }
      saveBookMarkType({name:_this.bookmarkTypeName}).then(function(value) {
        console.log(value);
        _this.getBookMarkType();
      }, function(error) {
        console.log(error);
      });
    },
    deleteBookmarkType(id){
      var _this = this;
      deleteBookMarkType(id).then(function(value) {
        console.log(value);
        _this.getBookMarkType();
      }, function(error) {
        console.log(error);
      });
      
    },
    getBookMarkType(){
      var _this = this;
      getBookMarkType().then(function(value) {
        _this.items = value.data
       
      }, function(error) {
        console.log(error);
      });
    }
   
  },
  mounted(){
    this.getBookMarkType();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.add-input{
  width: 15vw;
}
.input-container{
  /* float: left; */
  text-align: left;
  margin-bottom: 50px;
}
</style>
